<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="utf-8" /> 
  <meta charset="utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <link rel="stylesheet" href="./../jquery-ui-1.12.1/jquery-ui.css" /> 
  <link rel="stylesheet" href="./../css/bootstrap-datetimepicker.css" /> 
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
  <style type="text/css" media="screen">
               .my-content{
                    margin-top: 20px;
               } 

               legend{
                    width:100%;
                    text-align:center;
               }

               span{
                    color: red;
                    padding-left:3px;
               }
        </style> 
 </head> 
 <body> 
  <div id="app" class="col-md-12 my-content">
  <fieldset form="iceform">
    <legend>访客申请登记</legend> 
   <div class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <label for="respondentName" class="col-sm-2 control-label">访问用户<span>*</span></label> 
     <div class="col-sm-10"> 
      <input type="hidden" name="respondent" id="respondent" /> 
      <input type="text" class="form-control" id="respondentName" placeholder="请输入访问用户" @keyup="get($event)" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="lastname" class="col-sm-2 control-label">访客姓名<span>*</span></label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="lastname" placeholder="请输入访客姓名" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="t1" class="col-sm-2 control-label">预估访问开始时间<span>*</span></label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control my-date" id="estimateStart" data-date-format="yyyy-mm-dd hh:ii" placeholder='请选择预估访问开始时间'/> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="t1" class="col-sm-2 control-label">预估访问结束时间<span>*</span></label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control my-date" id="estimateEnd" data-date-format="yyyy-mm-dd hh:ii" placeholder='请选择预估访问结束时间'/> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="t1" class="col-sm-2 control-label">访问原因<span>*</span></label> 
     <div class="col-sm-10"> 
      <textarea class="form-control" rows="3" id="t1" placeholder='请输入访问原因'></textarea> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="t1" class="col-sm-2 control-label">访问留言</label> 
     <div class="col-sm-10"> 
      <textarea class="form-control" rows="3" id="t1" placeholder="请输入访问留言"></textarea> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-10" style="text-align:center"> 
      <button type="submit" class="btn btn-success">申请提交</button> 
     </div> 
    </div> 
   </div> 
   </fieldset>
  </div> 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <script src="./../jquery-ui-1.12.1/jquery-ui.js"></script> 
  <script type="text/javascript" src="./../js/bootstrap-datetimepicker.js" charset="UTF-8"></script> 
  <script src="../vue.min.js"></script> 
  <script>
    
Date.prototype.Format = function (fmt) { // author: meizz
    var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        "S": this.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
}

    $(function(){
        $('.my-date').datetimepicker();
        $('#estimateStart').val(new Date().Format("yyyy-MM-dd hh:mm"));
        $('#estimateEnd').val(new Date().Format("yyyy-MM-dd")+" 23:59");

    })

        new Vue({
            el:'#app',
            data:{
                respondent_data: [{
                        id:1,
                        value:"张三"
                      },{
                        id:2,
                        value:"李四"
                      },{
                        id:3,
                        value:"张三丰"
                      }
                ]
            },
            methods:{
                get(event) {
                       if(event.keyCode==38||event.keyCode==40)return;
                       if(event.keyCode==13){//回车
                       }

                       $( "#respondentName" ).autocomplete({
                            source: this.respondent_data,
                            select: function( event, ui ) {
                                console.log( "Selected: " + ui.item.value + " aka " + ui.item.id );
                            }
                        });
                }
            }
        })
    </script>  
 </body>
</html>